<template>
<div>
	<el-dialog title="线索详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" center @close="orderClose">
		<div class="edit-page">
			<div class="edit-wrap marg-B2" v-if="detail.clue">
				<div class="middle">
					<div class="t-eight fs-12">
						编号：{{detail.clue.clue_id}}
					</div>
				</div>
				<div class="middle marg-B1">
					<div class="t-eight marg-B1 fs-12">
						发布时间：{{detail.trace.publish_time}}
					</div>
					<div class="t-eight fs-12">
						抢单时间：{{detail.trace.buy_time}}
					</div>
				</div>
				<div class="case-list">
					<div class="items">
						<div class="flex f-be">
							<div class="fw-5 t-three fs-14">
								当事人：{{detail.trace.linkman == '' ? detail.clue.name : detail.trace.linkman}}
							</div>
							<div class="t-a" @click="nameEdit" v-if="clueType != 'view'">
								<img class="edit-icon" src="../assets/images/edit-icon.png" />
							</div>
						</div>
						<div class="t-three marg-B2 marg-T1 fs-14">
							<span>发布地：{{detail.clue.location}}</span>
						</div>
						<div class="t-eight marg-B1 flex">
							<div class="t-three fs-14">
								联系电话：
							</div>
							<div class="">
								<img class="phone-icon" src="../assets/images/phone-icon.png" />
								<span class="fs-16 t-two marg-Lhalf">{{detail.clue.phone}}</span>
							</div>
						</div>
						<div class="t-three marg-B2 marg-T1 fs-14">
							<span>线索类型：{{detail.clue.category_title}}</span>
						</div>
						<div class="t-three marg-B1 marg-T1 fs-14">
							<span>线索描述：</span>
							<div class="t-three fs-14 marg-T1">
								{{detail.clue.content}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="edit-wrap" v-if="detail.trace_user">
				<div class="top marg-L1">
					跟进人：{{detail.trace_user.name}}
				</div>
				<div class="edit-items first" style="padding: 10px 0 0 10px;">
					<div class="bot-bt pad-B1 pad-L1">
						<div class="flex f-mi f-be marg-B2">
							<span class="t-three marg-R1">添加标签</span>
							<div class="flex f-mi" @click="labelClick" style="cursor: pointer;" v-if="clueType != 'view'">
								<span>请选择</span>
								<i class="t-as el-icon-arrow-right"></i>
							</div>
						</div>
						<div class="flex f-wp">
							<div class="lab-btn" v-for="(labItem,labIndex) in checkLabList" :key="labIndex">{{labItem.label}}</div>
						</div>
					</div>
				</div>
				<div class="edit-items two" style="padding: 10px 0 10px 10px;">
					<div class="flex f-mi f-be pad-L1">
						<div class="t-three">
							跟进情况
						</div>
						<div class="flex f-mi" @click="qkClick" style="cursor: pointer;" v-if="clueType != 'view'">
							<span>添加</span>
							<div class="t-as el-icon-arrow-right"></div>
						</div>
					</div>
				</div>
				<el-timeline>
					<el-timeline-item v-for="(nodeItem,index) in nodeData" :key="index" :timestamp="nodeItem.create_time">
						{{nodeItem.content}}
					</el-timeline-item>
				</el-timeline>
			</div>
			<div class="btn-box" v-if="clueType != 'view'">
				<button @click="orderClose" class="btn gray marg-R2">取消</button>
				<button @click="orderSave" class="btn b-bg">保存</button>
			</div>
		</div>
	</el-dialog>
	<!-- 当事人 -->
	<el-dialog title="当事人姓名" width="300px" :visible.sync="dialogFormVisible" center @close="dialogFormVisible = false">
		<el-form>
			<el-form-item>
				<el-input v-model="useName" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div class="btn-box">
			<el-button class="btn gray marg-R2" @click="dialogFormVisible = false">取 消</el-button>
			<el-button class="btn b-bg" type="primary" @click="conConfirm">确 定</el-button>
		</div>
	</el-dialog>
	<el-dialog title="添加标签" :visible.sync="labelVisible" center :close-on-click-modal="false" @close="labelVisible = false">
		<div class="clue-box marg-B2">
			<div v-for="(item,index) in labelList" :key="index">
				<p class="marg-B1">{{item.cname}}</p>
				<div class="flex f-wp">
					<div class="items" :class="labelValue.indexOf(childItem.label_id) > -1 ? 'active':''" v-for="childItem in item.list" :key="childItem.label_id" @click="itemCLick(childItem,index)">{{childItem.label_title}}</div>
				</div>
			</div>
		</div>
		<div class="btn-box">
			<el-button class="btn gray marg-R2" @click="labelCancle">取 消</el-button>
			<el-button class="btn b-bg" type="primary" @click="labelConfirm">确 定</el-button>
		</div>
	</el-dialog>
	<el-dialog class="projectDialog" title="跟进节点" width="500px" :visible.sync="followVisible" center :close-on-click-modal="false" @close="followVisible = false">
		<el-form>
			<el-form-item>
				<el-select v-model="noteId" placeholder="请选择节点">
					<el-option v-for="(item,index) in noteList" :key="index" :label="item.note_title" :value="item.note_id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input type="textarea" v-model="content" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div class="btn-box">
			<el-button class="btn gray marg-R2" @click="followVisible = false">取 消</el-button>
			<el-button class="btn b-bg" type="primary" @click="followConfirm">确 定</el-button>
		</div>
	</el-dialog>
</div>
</template>
<script>
    import {request} from "../assets/js/utils/request";
	export default {
        props: ['isEditDialog','dataType','editInfo','noteList','noteInfo','clueType'],
        data() {
            return {
                loading: false,
                dialogVisible: false,
                detail: {},
                useName: '',
                labelList: [],
                activeIndex: '',
                dialogFormVisible: false,
                labelVisible: false,
                activities: [{
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                    }, {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                    }, {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }],
				labelId: '',
				followVisible: false,
				noteId: '',
				content: '',
				nodeData: [],
				labelValue: [],
				checkLabList: [],
				selectedMap: {}
			}				
        },
        created() {
            this.initData()
        },
		methods: {
			labelCancle() {
				this.labelVisible = false
				this.labelValue = []
			},
			getNodeList() {
				request({
					url: `/user/clue/note/list?buy_id=${this.editInfo.buy_id}`,
					method: 'GET',
				}).then(res => {
					if(res.code == 200) {
						this.nodeData = res.data.list
					} else {
						this.$message.error(res.message);
					}
				})
			},
			// 获取已选择的标签
			getLabelData() {
				request({
					url: `/user/clue/label/list?buy_id=${this.editInfo.buy_id}`,
					method: 'GET',
				}).then(res => {
					if(res.code == 200) {
						this.checkLabList = res.data.list
						// this.labelValue = []
						let storedSelectedIds = []
						this.checkLabList.forEach((obj) => {
							storedSelectedIds.push(obj.label_id)
						})
						// const storedSelectedIds = JSON.parse(localStorage.getItem('selectedLabelIds')) || [];
						if (storedSelectedIds.length > 0) {
							storedSelectedIds.forEach(id => {
								const categoryIndex = this.findCategoryIndexById(id);
								if (categoryIndex!== -1) {
									this.selectedMap[categoryIndex] = id;
								}
							});
							this.labelValue = storedSelectedIds
						}
					} else {
						this.$message.error(res.message);
					}
				})
			},
			orderClose() {
				this.dialogVisible = false
				this.$emit('editClose')
			},
			orderSave() {
				this.dialogVisible = false
				this.$emit('editSure')
			},
			followConfirm() {
				const formData = new FormData();
				formData.append('buy_id',this.detail.buy_id);
				formData.append('note_id',this.noteId)
				formData.append('content',this.content)
				request({
					url: '/user/clue/note/create',
					method: 'POST',
					data: formData
				}).then(res => {
					if(res.code == 200) {
						this.followVisible = false
						this.content = ''
						this.noteId = ''
						this.$message({
							message: '成功',
							type: 'success'
						});
						this.getNodeList()
					} else {
						this.$message.error(res.message);
					}
				})
			},
			// 当时人编辑
			conConfirm() {
				const formData = new FormData();
				formData.append('buy_id',this.detail.buy_id);
				formData.append('linkman',this.useName)
				request({
					url: '/user/clue/linkman',
					method: 'POST',
					data: formData
				}).then(res => {
					if(res.code == 200) {
						this.dialogFormVisible = false
						this.detail.trace.linkman = this.useName
						this.$message({
							message: '成功',
							type: 'success'
						});
					} else {
						this.$message.error(res.message);
					}
				})
			},
			findCategoryIndexById(labelId) {
				for (let i = 0; i < this.labelList.length; i++) {
					const category = this.labelList[i]
					const found = category.list.find(item => item.label_id === labelId);
					if (found) {
						return i
					}
				}
				return -1
			},
            itemCLick(params,firstIndex) {
				this.selectedMap[firstIndex] = params.label_id
				this.labelValue = []
				Object.keys(this.selectedMap).forEach(index => {
					console.log(this.selectedMap,this.selectedMap[index],index)
					const selectedId = this.selectedMap[index];
					if (selectedId) {
						this.labelValue.push(selectedId);
					}
				})
				// let labeLIndex = this.labelValue.indexOf(params.label_id);
				// if (labeLIndex > -1) {
				// 	this.labelValue.splice(labeLIndex, 1);
				// } else {
				// 	this.labelValue.push(params.label_id);
				// }
				// this.isSelected(params.label_id,firstIndex)
            },
			isSelected(labelId, categoryIndex) {
				return this.selectedMap[categoryIndex] === labelId;
			},
            labelConfirm() {
				const formData = new FormData();
				formData.append('buy_id',this.detail.buy_id);
				formData.append('label_id',this.labelValue)
				request({
					url: '/user/clue/label/create',
					method: 'POST',
					data: formData
				}).then(res => {
					if(res.code == 200) {
						this.labelVisible = false
						// this.detail.trace.linkman = this.useName
						this.labelValue = []
						this.$message({
							message: '成功',
							type: 'success'
						});
						this.getLabelData()
					} else {
						this.$message.error(res.message);
					}
				})
            },
            nameEdit() {
                this.dialogFormVisible = true
            },
            qkClick () {
                this.followVisible = true
            },
			labelClick(){
                this.labelVisible = true
			},
            initData() {
                request({
                    url: `/config/label`,
                    method: 'GET'
                }).then(res => {
                    if(res.code == 200) {
                        this.labelList = res.data.list || []
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }
		},
        watch: {
            isEditDialog(newVal) {
                this.dialogVisible = newVal
                this.detail = this.editInfo
				// this.nodeData = this.noteInfo
				this.getNodeList()
				this.getLabelData()
            }
        }
	}
</script>
<style lang="less" scoped>
    /deep/.el-dialog{
        border-radius: 15px;
    }
	.edit-page{
		.edit-wrap{
			padding: 30rpx;
			border-radius: 8px;
			.top{
				padding-bottom: 15px;
				border-bottom: 1px solid #E5E5E5;
			}
			.middle{
				padding: 10px 0;
				border-bottom: 1px solid #E5E5E5;
			}
			.case-list{
				.items{
					// padding: 32rpx;
					// border: 2rpx solid #E5E5E5;
					// border-radius: 16rpx;
					.bot-t{
						padding-top: 10px;
						border-top: 1px solid #E5E5E5;
						.right{
							// flex: 1;
							display: flex;
						}
					}
					.phone-icon{
						width: 13px;
					}
					.edit-icon{
						width: 17px;
					}
				}
			}
			.edit-items{
				position: relative;
				.lab-btn{
					padding: 5px 10px;
					display: inline-block;
					border: 1px solid rgba(166, 166, 166, 1);
					border-radius: 20px;
					margin-right: 10px;
					margin-bottom: 10px;
				}
			}
			.first::after{
				position: absolute;
				left: 0;
				top: 13px;
				content: "";
				width: 4px;
				height: 16px;
				background: #383838;
			}
			.two::after{
				position: absolute;
				left: 0;
				top: 12px;
				content: "";
				width: 4px;
				height: 16px;
				background: #383838;
			}
			.bot-bt{
				border-bottom: 1px solid #E5E5E5;
			}
			.g-btn{
				padding: 0;
				font-size: 14px;
				color: #383838;
				width: 70px;
				height: 24px;
				line-height: 24px;
				border-radius: 24px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(166, 166, 166, 1);
			}
		}
		
	}
	.btn-box{
        text-align: center;
        .btn{
            font-size: 14px;
            padding: 0;
            color: #fff;
            width: 96px;
            height: 28px;
            border: none;
            text-align: center;
            line-height: 28px;
            border-radius: 25px;
        }
        .b-bg{
            background: #2967E3;
        }
        .l-bg{
            background: #00BAAD;
        }
        .gray{
            background: #A6A6A6;
        }
    }
	.modal-btn{
		padding-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		.cancle-btn{
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 60rpx;
			color: rgba(255, 255, 255, 1);
			width: 192rpx;
			height: 60rpx;
			opacity: 1;
			border-radius: 15.5px;
			background: rgba(166, 166, 166, 1);
		}
		.confirm-btn{
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 60rpx;
			color: rgba(255, 255, 255, 1);
			width: 192rpx;
			height: 60rpx;
			opacity: 1;
			border-radius: 15.5px;
			background: rgba(42, 130, 228, 1);
		}
		.share-btn{
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30px;
			color: rgba(255, 255, 255, 1);
			width: 100px;
			height: 30px;
			opacity: 1;
			border-radius: 15.5px;
			background: #2A82E4;
		}
	}
	.pop-wrap{
		padding: 10px;
		height: 500px;
		overflow-y: auto;
		.title{
			// padding: 30rpx;
			button{
				margin: 0;
			}
			.cancle-btn{
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 30px;
				color: rgba(255, 255, 255, 1);
				width: 110px;
				height: 30px;
				opacity: 1;
				border-radius: 15.5px;
				background: rgba(166, 166, 166, 1);
			}
			.confirm-btn{
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 30px;
				color: rgba(255, 255, 255, 1);
				width: 110px;
				height: 30px;
				opacity: 1;
				border-radius: 15.5px;
				background: rgba(42, 130, 228, 1);
			}
		}
		.items{
			width: 100px;
			height: 35px;
			margin: 5px;
			text-align: center;
			line-height: 35px;
			color: rgba(97, 97, 97, 1);
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);			
			border: 1px solid rgba(191, 191, 191, 1);
		}
	}
    .clue-box{
        .items{
			width: auto;
			min-width: 100px;
			height: 30px;
			line-height: 30px;
			text-align: center;
            cursor: pointer;
            color: #383838;
            margin-right: 10px;
			margin-bottom: 10px;
            padding: 0 10px;
            border-radius: 30px;
            background: rgba(232, 232, 232, 1);
        }
        .active{
            color: #fff;
            background: #2A82E4;
        }
    }
	/deep/.projectDialog{
		.el-select {
			width: 100%;
		}
	}
</style>